<h3 class="text-2xl font-semibold text-text-primary">
  API {{'PAC.KEY_WORDS.SecretKey' | translate: {Default: 'Key'} }}
</h3>

<button type="button" class="absolute right-4 top-4 w-6 h-6 rounded-md cursor-pointer pressable hover:bg-hover-bg" (click)="close()">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 20 20"
    fill="currentColor"
    class="text-gray-500"
  >
    <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
  </svg>
</button>
  
  <p class="mt-1 text-[13px] text-gray-500 font-normal leading-5 flex-shrink-0">
    {{ 'PAC.Xpert.ProtectYourKey' | translate: {Default: 'To prevent API abuse, protect your API Key. Avoid using it as plain text in front-end code. :)'} }}
  </p>
  <div class="flex flex-col flex-grow mt-4 overflow-hidden">
    <div class="flex items-center flex-shrink-0 text-sm font-semibold text-gray-500 border-b border-solid h-9">
      <div class="flex-shrink-0 w-64 px-3">API {{'PAC.KEY_WORDS.SecretKey' | translate: {Default: 'Key'} }}</div>
      <div class="flex-shrink-0 px-3 w-[200px]">{{ 'PAC.KEY_WORDS.CreatedAt' | translate: {Default: 'Created At'} }}</div>
      <div class="flex-shrink-0 px-3 w-[200px]">{{ 'PAC.KEY_WORDS.LastUsed' | translate: {Default: 'Last Used'} }}</div>
      <div class="flex-grow px-3"></div>
    </div>
    <div class="flex-grow overflow-auto">
      @for (key of keys(); track key.id) {
        <div class="flex items-center text-sm font-normal text-gray-700 border-b border-solid h-10">
          <div class="flex-shrink-0 w-64 px-3 font-mono truncate">
            {{ key.token | mask:4:4 }}
          </div>
          <div class="flex-shrink-0 px-3 truncate w-[200px]">{{ key.createdAt | format: 'PPpp'}}</div>
          <div class="flex-shrink-0 px-3 truncate w-[200px]">
            @if (key.lastUsedAt) {
                {{ key.lastUsedAt | relative}}
            } @else {
              {{ 'PAC.KEY_WORDS.Never' | translate: {Default: 'Never'} }} 
            }
          </div>
          <div class="flex flex-grow px-3">
            <div class="flex items-center justify-center flex-shrink-0 w-7 h-7 text-lg mr-1 rounded-lg cursor-pointer pressable text-text-secondary hover:bg-gray-100"
              [matTooltip]="key.copied ? ('PAC.KEY_WORDS.Copied' | translate: {Default: 'Copied'}) : ('PAC.KEY_WORDS.Copy' | translate: {Default: 'Copy'})"
              matTooltipPosition="above"
              (click)="copy(key)"
            >
              @if (key.copied) {
                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4">
                  <path d="M10.6665 2.66683C11.2865 2.66683 11.5965 2.66683 11.8508 2.73498C12.541 2.91991 13.0801 3.45901 13.265 4.14919C13.3332 4.40352 13.3332 4.71352 13.3332 5.3335V11.4668C13.3332 12.5869 13.3332 13.147 13.1152 13.5748C12.9234 13.9511 12.6175 14.2571 12.2412 14.4488C11.8133 14.6668 11.2533 14.6668 10.1332 14.6668H5.8665C4.7464 14.6668 4.18635 14.6668 3.75852 14.4488C3.3822 14.2571 3.07624 13.9511 2.88449 13.5748C2.6665 13.147 2.6665 12.5869 2.6665 11.4668V5.3335C2.6665 4.71352 2.6665 4.40352 2.73465 4.14919C2.91959 3.45901 3.45868 2.91991 4.14887 2.73498C4.4032 2.66683 4.71319 2.66683 5.33317 2.66683M5.99984 10.0002L7.33317 11.3335L10.3332 8.3335M6.39984 4.00016H9.59984C9.9732 4.00016 10.1599 4.00016 10.3025 3.9275C10.4279 3.86359 10.5299 3.7616 10.5938 3.63616C10.6665 3.49355 10.6665 3.30686 10.6665 2.9335V2.40016C10.6665 2.02679 10.6665 1.84011 10.5938 1.6975C10.5299 1.57206 10.4279 1.47007 10.3025 1.40616C10.1599 1.3335 9.97321 1.3335 9.59984 1.3335H6.39984C6.02647 1.3335 5.83978 1.3335 5.69718 1.40616C5.57174 1.47007 5.46975 1.57206 5.40583 1.6975C5.33317 1.84011 5.33317 2.02679 5.33317 2.40016V2.9335C5.33317 3.30686 5.33317 3.49355 5.40583 3.63616C5.46975 3.7616 5.57174 3.86359 5.69718 3.9275C5.83978 4.00016 6.02647 4.00016 6.39984 4.00016Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              } @else {
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="w-4 h-4">
                  <path d="M10.6665 2.66634H11.9998C12.3535 2.66634 12.6926 2.80682 12.9426 3.05687C13.1927 3.30691 13.3332 3.64605 13.3332 3.99967V13.333C13.3332 13.6866 13.1927 14.0258 12.9426 14.2758C12.6926 14.5259 12.3535 14.6663 11.9998 14.6663H3.99984C3.64622 14.6663 3.30708 14.5259 3.05703 14.2758C2.80698 14.0258 2.6665 13.6866 2.6665 13.333V3.99967C2.6665 3.64605 2.80698 3.30691 3.05703 3.05687C3.30708 2.80682 3.64622 2.66634 3.99984 2.66634H5.33317M5.99984 1.33301H9.99984C10.368 1.33301 10.6665 1.63148 10.6665 1.99967V3.33301C10.6665 3.7012 10.368 3.99967 9.99984 3.99967H5.99984C5.63165 3.99967 5.33317 3.7012 5.33317 3.33301V1.99967C5.33317 1.63148 5.63165 1.33301 5.99984 1.33301Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              }
            </div>
            <div class="flex items-center justify-center flex-shrink-0 w-7 h-7 text-lg rounded-lg cursor-pointer pressable text-text-secondary hover:bg-red-100 hover:text-red-500"
              (click)="delete(key)"
            >
              <i class="ri-delete-bin-line"></i>
            </div>
          </div>
        </div>
      }
    </div>
  </div>
  <div class="flex">
    <button
      type="button"
      class="btn disabled:btn-disabled btn-secondary btn-medium flex flex-shrink-0 mt-4"
      (click)="createApiKey()"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="flex flex-shrink-0 w-4 h-4 mr-2"
      >
        <path
          d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
        ></path>
      </svg>
      <div class="text-sm font-medium text-gray-800">
        {{ 'PAC.Xpert.CreateNewSecretKey' | translate: {Default: 'Create new secret key'} }}
      </div>
    </button>
  </div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full"></ngm-spin>
}